<template>
    <div id="app">
        <MyHeader>
            <img :src="headPic" alt="" class="img" @click="back">
            <img src="../../assets/3.png" alt="" class="img1" @click="my_message">
        </MyHeader>
        <div class="tab">
            <div v-for="(item, index) in datalist" :key="item.id">
                <div class="tabdata" @click="dian(item)" :class="{ hhh: active === item.id }">
                    {{ item.departmentName }}
                </div>
            </div>
        </div>
        <div>
            <div v-for="(item, index) in kunlist" :key="item.id" class="tb">
                <div class="tp">
                    <div class="tu">
                        <img :src="item.imagePic" alt="" class="image" @click="tiao(item.doctorId)">
                    </div>
                </div>
                <div class="kun" @click="zhuan(item.doctorId)">
                    <div class="wen">
                        {{ item.doctorName }}
                    </div>
                    <div class="wen">
                        {{ item.inauguralHospital }}
                    </div>
                    <div class="wen">
                        {{ item.jobTitle }}
                    </div>
                    <div class="wen">
                        好评率:{{ item.praise }}
                    </div>
                    <div class="wen">
                        服务患者人数:{{ item.serverNum }}
                    </div>
                    <div class="jk">
                        <div>
                            {{ item.servicePrice }} H币/次
                        </div>
                        <div>
                            <button class="button" @click="zi">立即资讯</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import MyHeader from '@/components/MyHeader.vue';
import {useRouter} from 'vue-router';
import { onMounted, ref, onUnmounted } from 'vue';
import axios from 'axios';
import router from '@/router';
import { id } from 'element-plus/es/locales.mjs';
// import console from 'console';
const routers=useRouter(router);

const active = ref(2);
const page = ref(1);
const isLoading = ref(false);
const dian = (item) => {
    active.value = item.id;
    page.value = 1;
    kunlist.value = [];
    getdata1(active.value)
}
const logindata = ref(JSON.parse(localStorage.getItem('result') || '{}'))
const datalist = ref([]);
const kunlist = ref([])
const getdata = () => {
    axios.get('/health/share/knowledgeBase/v1/findDepartment').then((res) => {
        datalist.value = res.data.result;
    })
}
getdata();
const tiao = (doctorId) => {
    router.push({ name: 'yisdetail', params: { doctorId: doctorId } })
    console.log(doctorId)
}
const zhuan=(doctorId)=>{
    router.push({ name: 'yspj', params: { doctorId: doctorId } })
}
// const getdata1 = (active) => {
//     axios.get('/health/user/inquiry/v1/findDoctorList', {
//         params: {
//             deptId: active,
//             condition: 4,
//             sortBy: 1,
//             page: 1,
//             count: 5,
//         }
//     }).then((res) => {
//         console.log(res)
//         kunlist.value = res.data.result;
//     })
// }
// getdata1(active.value);
const zi = () => {
    router.push('/chat_service')
}
const getdata1 = async () => {
    if (isLoading.value) return;
    isLoading.value = true;
    await axios.get('/health/user/inquiry/v1/findDoctorList', {
        params: {
            deptId: active.value,
            condition: 4,
            sortBy: 1,
            page: page.value,
            count: 5,
        }
    }).then(res => {
        const newData = res.data.result;
        console.log(newData)
        if (newData && newData.length > 0) {
            kunlist.value.push(...newData);
            page.value += 1;
        } else {
            console.log("没有更多数据了");
        }
    }).finally(() => {
        isLoading.value = false;
    });
}
const handleScroll = () => {
    setTimeout(() => {
        const scrollHeight = document.documentElement.scrollHeight;
        const scrollTop = document.documentElement.scrollTop;
        const clientHeight = document.documentElement.clientHeight;
        if (scrollTop + clientHeight >= scrollHeight - 80) {
            getdata1();
        }
    }, 1000)
};

onMounted(() => {
    getdata1(active.value);
    window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
// 修改头像
const headPic = localStorage.getItem('headpic')

const back=()=>{
    routers.go(-1)
}
const my_message=()=>{
    routers.push('/my_message')
}

</script>

<style scoped lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    color: #2c3e50;
    // margin-top: 60px;
}

.custom-item {
    line-height: 30px;
    /* 与 itemHeight 相同 */
    padding: 0 10px;
}

.button {
    background: blue;
    color: #fff;
    border: none;
}

.jk {
    width: 100%;
    display: flex;
    margin-top: 2px
}

.kun {
    display: flex;
    flex-direction: column;
    // margin-top: px; // 15px * 0.5
}

.hhh {
    color: pink
}

.tab {
    width: 100%;
    display: flex;
    overflow-y: auto;
    overflow: none;
}

.tb {
    display: flex;
}

.tabdata {
    width: 75px; // 150px * 0.5
    height: 25px; // 50px * 0.5
    font-size: 15px; // 30px * 0.5
    text-align: center
}

.img {
    width: 32.5px; // 65px * 0.5
    height: 32.5px; // 65px * 0.5
    border-radius: 50%;
    margin-left: 5px; // 10px * 0.5
}

.wen {
    margin-top: 7.5px; // 15px * 0.5
}

.img1 {
    width: 22.5px; // 45px * 0.5
    height: 25px; // 50px * 0.5
    position: absolute;
    left: 340px; // 680px * 0.5
    top: 10px; // 20px * 0.5
}

.tp {
    width: 140px; // 280px * 0.5
    height: 125px; // 250px * 0.5
    margin-top: 7.5px; // 15px * 0.5
}

.tu {
    width: 125px; // 250px * 0.5
    height: 125px; // 250px * 0.5
    margin: 0 auto;
}

.image {
    width: 100%;
    height: 100%;
}
</style>
